<template>
  <div style="height:100%">
    <vxe-table show-overflow ref="xTableRptitemRef" height="auto" :loading="loading" :select-config="{ reserve: true }"
      :edit-rules="validRules" :keyboard-config="keyConfig" :mouse-config="{ selected: true }"
      :row-class-name="RefRowClassName" :data.sync="RefValData" border size="mini" show-header-overflow
      highlight-current-row highlight-hover-row resizable stripe header-align="center" align="center"
      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, activeMethod: activeMethod, showIcon: false }"
      @edit-closed="ref_lh_Change" :header-cell-class-name="headerCellClassName" :cell-class-name="cellClassName"
      class="rightClass" @cell-dblclick="dblclickdialog">
      <vxe-table-column field="seq" title="序号" width="50" :edit-render="{ name: 'input', autoselect: true }"
        header-align="center"></vxe-table-column>
      <vxe-table-column field="patsex" title="性别" width="40" :edit-render="{ name: 'select', options: $opt.SexOption }">
      </vxe-table-column>
      <vxe-table-column field="ageyear1" title="年龄1(岁)>=" width="77"
        :edit-render="{ name: 'input', autoselect: true, events: { change: ref_lh_Change } }"></vxe-table-column>
      <vxe-table-column field="agestr1" title="年龄1显示(约)" width="77"></vxe-table-column>
      <vxe-table-column field="ageyear2" :title="ageyear2title" width="77"
        :edit-render="{ name: 'input', autoselect: true, events: { change: ref_lh_Change } }"></vxe-table-column>
      <vxe-table-column field="agestr2" title="年龄2显示(约)" width="77"></vxe-table-column>

      <!-- <vxe-table-column field="specimen_code" title="样本类型" width="80"></vxe-table-column> -->
      <vxe-table-column field="specimen_name" title="样本类型" width="80"></vxe-table-column>
      <!-- <vxe-table-column key="diag_icd" field="diag_icd" title="诊断ICD" width="80px"></vxe-table-column> -->
      <vxe-table-column key="diagname" field="diagname" title="诊断ICD" width="80px"></vxe-table-column>
      <!-- <vxe-table-column field="physicycle" title="生理周期" width="78" :edit-render="{name:'select', options: PhysiCycleOption}"></vxe-table-column> -->
      <vxe-table-column field="physicyclename" title="生理周期" width="78"></vxe-table-column>
      <!-- <vxe-table-column key="deptno" field="deptno" title="科室" width="80px"></vxe-table-column> -->
      <vxe-table-column key="deptname" field="deptname" title="科室" width="80px"></vxe-table-column>
      <vxe-table-column field="ref_l" title="参考低值" width="70" header-align="center"
        :edit-render="{ name: 'input', autoselect: true }"></vxe-table-column>
      </vxe-table-column>
      <vxe-table-column field="autochk_h" title="自动审核高值" width="80" header-align="center"
        :edit-render="{ name: 'input', autoselect: true }"></vxe-table-column>
      <vxe-table-column field="redo_l" title="需复查低值" width="80" header-align="center"
        :edit-render="{ name: 'input', autoselect: true }"></vxe-table-column>
      <vxe-table-column field="redo_h" title="需复查高值" width="80" header-align="center"
        :edit-render="{ name: 'input', autoselect: true }"></vxe-table-column>

      <template v-slot:fix>
        <div style="font-size:12px;padding-top:3px;background-color:#fff;text-align:center">
          <el-button @click="RefValinsertEvent()" class="el-button--310">新增</el-button>
          <el-button @click="RefValdeleteEvent()" class="el-button--310">删除</el-button>
        </div>
      </template>
    </vxe-table>
    <!--参考值显示-->
    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="多行参考值显示"
      :visible.sync="reftext_dialog">
      <el-input type="textarea" :rows="10" placeholder="参考值显示" v-model="val_ref_text">
      </el-input>
      <div align="right" style="width:100%;margin-top:10px;">
        <el-button @click="reftext_saveevent" icon="el-icon-document">保存</el-button>
        <el-button @click="reftext_cancelevent" icon="el-icon-close">取消</el-button>
      </div>
    </el-dialog>
    <!--标本类型-->
    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择标本类型"
      :visible.sync="dialogspecimen">
      <rm-pop-common ref="popspecimen" @change="specimenChange" irrelevant='specimenShowIrrelevant'
        @cancel="dialogspecimen = false;" datatype="specimen"></rm-pop-common>
    </el-dialog>
    <!--诊断ICD-->
    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择诊断ICD"
      :visible.sync="dialogdiagicd">
      <rm-pop-common ref="popcom" @change="diagicdChange" irrelevant='diagicdShowIrrelevant'
        @cancel="dialogdiagicd = false;" datatype="diagnose"></rm-pop-common>
    </el-dialog>
    <!--科室-->
    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择科室"
      :visible.sync="dialogdeptno">
      <rm-pop-common ref="popdept" @change="deptChange" irrelevant='deptShowIrrelevant' @cancel="dialogdeptno = false;"
        datatype="dept"></rm-pop-common>
    </el-dialog>
    <!--生理周期-->
    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择生理周期"
      :visible.sync="dialogphysicycle">
      <rm-pop-common ref="popphysicycle" kindno="physicycle" irrelevant='physicycleShowIrrelevant'
        @change="physicycleChange" @cancel="dialogphysicycle = false;" datatype="seccode"></rm-pop-common>
    </el-dialog>
    <!--病人年龄-->
    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="病人年龄" ref="dialogage"
      :visible.sync="diaglogageVisible" width="450px">
      <table class="table1style">
        <tr>
          <td>
            <el-input v-model="age.agenum1" type="number" style="width:80px" @change="getAgestr" @focus="ageFocus($event)"
              ref="refagenum1"></el-input>
          </td>
          <td>
            <el-radio-group v-model="age.ageunit1">
              <el-radio :label="'Y'" @change="agenum1Change('Y')">岁</el-radio>
              <el-radio :label="'M'" @change="agenum1Change('M')">月</el-radio>
              <el-radio :label="'D'" @change="agenum1Change('D')">天</el-radio>
              <!-- <el-radio :label="'H'" @change="agenum1Change('H')">小时</el-radio>
                          <el-radio :label="'F'" @change="agenum1Change('F')">分钟</el-radio> -->
            </el-radio-group>
          </td>
        </tr>
        <!-- <tr>
                  <td>
                      <el-input v-model="age.agenum2" type="number" style="width:80px" @change="getAgestr" @focus="ageFocus($event)"></el-input>
                  </td>
                  <td>
                      <el-radio-group v-model="age.ageunit2" disabled>
                          <el-radio :label="'Y'">岁</el-radio>
                          <el-radio :label="'M'">月</el-radio>
                          <el-radio :label="'D'">天</el-radio>
                          <el-radio :label="'H'">小时</el-radio>
                          <el-radio :label="'F'">分钟</el-radio>
                      </el-radio-group>
                  </td>
              </tr> -->
      </table>
      <div style="color:rgb(68 170 246);margin:5px">
        返回年龄：{{ age.agemodel }}<br>
        可在前台病人年龄框中输入：{{ age.agestr }}返回相同结果
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="$refs.dialogage.Confirm()">确 定</el-button>
        <el-button @click.native="$refs.dialogage.Cancel()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  props: { tableData: { type: Array, default: [] }, related: { type: Object }, prgno: { type: String }, rpt_itemcode: { type: String, default: "" }, rptunitid: { type: [String, Number], default: "" }, digits: { type: String, default: "0" }, funon: { type: Boolean, default: false } },
  name: "RmRptitemref",
  data() {
    return {
      RefValData: this.tableData,
      validRules: {
        // ref_l: [{ required: true, type: "number", message: "值必须为数字" }],
        // ref_h: [{ required: true, type: "number", message: "值必须为数字" }],
        // redo_l: [{ required: true, type: "number", message: "值必须为数字" }],
        // redo_h: [{ required: true, type: "number", message: "值必须为数字" }],
        // warn_l: [{ required: true, type: "number", message: "值必须为数字" }],
        // warn_h: [{ required: true, type: "number", message: "值必须为数字" }],
        // seq: [{ required: true, type: "number", message: "值必须为数字" }],
        rptunitid: [{ required: true, message: "必须填写" }],
        patsex: [{ required: true, message: "必须填写性别" }],
        // ageyear1: [{ required: true, message: "必须填写年龄1" }],
        // ageyear2: [{ required: true, message: "必须填写年龄2" }],
        specimen_code: [{ required: true, message: "必须填写标本类型" }],
        physicycle: [{ required: true, message: "必须填写生理周期" }],
        diag_icd: [{ required: true, message: "必须填写诊断ICD编码" }],
        deptno: [{ required: true, message: "必须填写科室" }],
      },
      PhysiCycleOption: [],
      // specimenOption: [],
      // diagicdOption: [],
      // deptOption: [],
      loading: false,
      diaglogageVisible: false,
      diagReturnRow: "", //双击弹窗获取row
      //参考值范围
      reftext_dialog: false,
      val_ref_text: "",
      //标本类型
      dialogspecimen: false,
      //科室
      dialogdeptno: false,
      //诊断ICD
      dialogdiagicd: false,
      //生理周期
      dialogphysicycle: false,
      ageyear2title: "年龄2(岁)<=",
      refvaljoinchar: "--",
      age: {
        agenum1: "",
        agenum2: "",
        ageunit1: "M",
        ageunit2: "D",
        agestr: "",
        agemodel: "",
      },
      keyConfig: {
        isDel: true,
        isTab: true,
        isEdit: false,
      },
      keyLocalConfig: {
        isArrow: true,
      },
    };
  },
  created() {
    this.ddlInitialList();
  },
  mounted() {
    //console.log("11", this.tableData);
  },
  watch: {
    tableData: {
      handler: function (val, oldVal) {
        this.RefValData = val;
      },
      deep: true,
    },
  },
  methods: {
    ddlInitialList() {
      this.$tool
        .request({
          url: "ucent/liscomm",
          method: "post",
          data: {
            action: "ddlInitialList",
          },
        })
        .then((res) => {
          // this.PhysiCycleOption = res.dt1; //生理周期
          // this.specimenOption = res.dt2; //标本类型
          // this.diagicdOption = res.dt4; //诊断ICD
          // this.deptOption = res.deptOption; //科室
          if (res.refbyagelessuplimit == "1") this.ageyear2title = "年龄2(岁)<";
          if (res.refvaljoinchar != "") this.refvaljoinchar = res.refvaljoinchar;
        })
        .catch((e) => {
          console.log("error", e);
        });
    },
    ref_lh_Change({ row, column }, $event) {
      //   console.log("111",$event);
      let arr = ["ref_l", "ref_h"];
      if (arr.includes(column.property)) {
        console.log(this.digits);
        let ref_l = this.$pub.getdigits(row.ref_l, this.digits, this.funon);
        let ref_h = this.$pub.getdigits(row.ref_h, this.digits, this.funon);
        // if (!!row.ref_l && !!row.ref_h) {
        //     // let reftxt = parseFloat(row.ref_l) + "--" + parseFloat(row.ref_h);
        //     //console.log("join", this.refvaljoinchar);
        //     let reftxt = parseFloat(row.ref_l) + this.refvaljoinchar + parseFloat(row.ref_h);
        //     this.$nextTick(() => {
        //         row.ref_text = reftxt;
        //     });
        // } else {
        //     if (!!row.ref_l && !row.ref_h) {
        //         row.ref_text = "≥" + parseFloat(row.ref_l);
        //     }
        //     if (!row.ref_l && !!row.ref_h) {
        //         row.ref_text = "≤" + parseFloat(row.ref_h);
        //     }
        //     if (!row.ref_l && !row.ref_h) {
        //         row.ref_text = "";
        //     }
        // }
        if (!!ref_l && !!ref_h) {
          //let reftxt = parseFloat(ref_l) + this.refvaljoinchar + parseFloat(ref_h);
          let reftxt = ref_l + this.refvaljoinchar + ref_h;
          this.$nextTick(() => {
            row.ref_text = reftxt;
          });
        } else {
          if (!!ref_l && !ref_h) {
            //  row.ref_text = "≥" + parseFloat(ref_l);
            row.ref_text = "≥" + ref_l;
          } else if (!ref_l && !!ref_h) {
            // row.ref_text = "≤" + parseFloat(ref_h);
            row.ref_text = "≤" + ref_h;
          } else if (!ref_l && !ref_h) {
            row.ref_text = "";
          }
        }
      } else if (column.property == "ageyear1") {
        if (!!row.ageyear1 && Number(row.ageyear1) != -1) {
          this.GetPatBirthAge(row.ageyear1)
            .then((res) => {
              row.ageyear1 = res.str;
              row.agestr1 = res.str1;
              //  row.ageyear1str = res.Item1.replace("y","岁");
            })
            .catch((e) => {
              // row.ageyear1 = "-1";
            });
        } else {
          row.ageyear1 = "-1";
        }
      } else if (column.property == "ageyear2") {
        if (!!row.ageyear2 && Number(row.ageyear2) != -1) {
          this.GetPatBirthAge(row.ageyear2)
            .then((res) => {
              row.ageyear2 = res.str;
              row.agestr2 = res.str1;
            })
            .catch((e) => {
              // row.ageyear2 = "-1";
            });
        } else {
          row.ageyear2 = "-1";
        }
      }
    },
    GetPatBirthAge(agestr) {
      return this.$tool.request({
        url: "ucent/liscomm",
        method: "post",
        data: {
          action: "GetPatBirthAge",
          agestr: agestr,
        },
      });
    },
    //参考值明细增加
    RefValinsertEvent() {
      if (this.rptunitid == "" && this.prgno == "LIS132") {
        this.$alert("请先选择报告单元！", "提示");
        return false;
      } else if (this.rptunitid == "" && this.prgno == "LIS110_syqk") {
        this.$alert("请先在LIS132报告单元对照报告项目中完成该报告项目与报告单元的对照！", "提示");
        return false;
      }
      if (this.rpt_itemcode == "") {
        this.$alert("请先选中报告项目！", "提示");
        return false;
      }
      let seq = 1;
      let seqk = 10;
      let oridata = this.$refs.xTableRptitemRef.tableData;
      let seqlist = XEUtils.max(oridata, (item) => item.seq);
      let maxseq = 10;
      if (!!seqlist) {
        maxseq = seqlist.seq + 10;
      }
      let initdata = {
        rpt_itemcode: this.rpt_itemcode,
        rptunitid: this.rptunitid,
        patsex: "All",
        ageyear1: "-1",
        ageyear2: "-1",
        specimen_code: "All",
        physicycle: "All",
        diag_icd: "All",
        deptno: "All",
        ref_l: "",
        ref_h: "",
        ref_text: "",
        redo_l: "",
        redo_h: "",
        warn_l: "",
        warn_h: "",
        seq: maxseq,
      };
      this.$refs.xTableRptitemRef.insert(initdata).then(({ row }) => {
        this.$refs.xTableRptitemRef.setCurrentRow(row);
        if (this.related.sexrelated) {
          this.$refs.xTableRptitemRef.setActiveCell(row, "patsex");
        } else if (this.related.agerelated) {
          this.$refs.xTableRptitemRef.setActiveCell(row, "ageyear1");
        } else if (this.related.specimenrelated) {
          this.$refs.xTableRptitemRef.setActiveCell(row, "specimen_code");
        } else if (this.related.physicyclerelated) {
          this.$refs.xTableRptitemRef.setActiveCell(row, "physicycle");
        } else if (this.related.diagicdrelated) {
          this.$refs.xTableRptitemRef.setActiveCell(row, "diag_icd");
        } else if (this.related.deptrelated) {
          this.$refs.xTableRptitemRef.setActiveCell(row, "deptno");
        } else {
          this.$refs.xTableRptitemRef.setActiveCell(row, "ref_l");
        }
      });
    },
    //参考值删除
    RefValdeleteEvent() {
      let delrow = this.$refs.xTableRptitemRef.getCurrentRow();
      if (delrow) {
        this.$refs.xTableRptitemRef.remove(delrow);
        let havedata = this.$refs.xTableRptitemRef.getTableData().fullData;
        if (havedata.length > 0) {
          let selectrow = this.$refs.xTableRptitemRef.getTableData().fullData[havedata.length - 1];
          this.$refs.xTableRptitemRef.setCurrentRow(selectrow);
        } else {
          this.$refs.xTableRptitemRef.setCurrentRow(null);
        }
      } else {
        this.$pub.message(this, "请先选中要删除的明细！", "warning");
      }
    },
    activeMethod({ row, column }) {
      if (column.property == "patsex") {
        if (this.related.sexrelated) {
          return true;
        } else {
          return false;
        }
      }
      if (column.property == "specimen_code") {
        if (this.related.specimenrelated) {
          return true;
        } else {
          return false;
        }
      }
      if (column.property == "physicycle") {
        if (this.related.physicyclerelated) {
          return true;
        } else {
          return false;
        }
      }
      if (column.property == "diag_icd") {
        if (this.related.diagicdrelated) {
          return true;
        } else {
          return false;
        }
      }
      if (column.property == "deptno") {
        if (this.related.deptrelated) {
          return true;
        } else {
          return false;
        }
      }
      if (["ageyear1", "ageyear2"].includes(column.property)) {
        if (this.related.agerelated) {
          return true;
        } else {
          return false;
        }
      }
      if (["agestr1", "agestr2"].includes(column.property)) {
        if (this.related.agerelated) {
          return true;
        } else {
          return false;
        }
      }
      if (column.property == "seq") {
        return true;
      } else {
        return true;
      }
    },
    cellClassName({ row, rowIndex, column, columnIndex }) {
      if (column.property === "patsex") {
        if (!this.related.sexrelated) {
          return this.$pub.diseditcolumn();
        }
      }
      if (column.property == "physicycle") {
        if (!this.related.physicyclerelated) {
          return this.$pub.diseditcolumn();
        }
      }
      if (column.property == "diag_icd") {
        if (!this.related.diagicdrelated) {
          return this.$pub.diseditcolumn();
        }
      }
      if (column.property == "deptno") {
        if (!this.related.deptrelated) {
          return this.$pub.diseditcolumn();
        }
      }
      if (column.property == "specimen_code") {
        if (!this.related.specimenrelated) {
          return this.$pub.diseditcolumn();
        }
      }
      if (["ageyear1", "ageyear2"].includes(column.property)) {
        if (!this.related.agerelated) {
          return this.$pub.diseditcolumn();
        } else {
          return "";
        }
      }
      if (["agestr1", "agestr2"].includes(column.property)) {
        if (!this.related.agerelated) {
          return this.$pub.diseditcolumn();
        } else {
          return "";
        }
      }
    },
    //参考值新增与修改颜色区别
    RefRowClassName({ row, rowIndex }) {
      // let isDirty = this.$refs.xTableRptitemRef.hasRowChange(row);
      // if (isDirty) {
      //     return "row-modify";
      // }
      // if (this.$refs.xTableRptitemRef.hasRowInsert(row)) return "row-new";
    },
    //双击开窗
    dblclickdialog({ row, column }) {
      this.diagReturnRow = row;
      if (column.property == "ref_text") {
        //弹窗显示多行参考值的文本编辑
        let refval = row.ref_text;
        this.val_ref_text = "";
        let k = "";
        if (!!refval) {
          k = refval.split("|");
          this.val_ref_text = k.join("\n");
        }
        this.reftext_dialog = true;
      } else if (column.property == "specimen_name") {
        if (this.related.specimenrelated) {
          this.dialogspecimen = true;
        }
      } else if (column.property == "diagname") {
        //诊断icd双击开窗
        if (this.related.diagicdrelated) {
          this.dialogdiagicd = true;
        }
      } else if (column.property == "deptname") {
        if (this.related.deptrelated) {
          this.dialogdeptno = true;
        }
      } else if (column.property == "physicyclename") {
        if (this.related.physicyclerelated) {
          this.dialogphysicycle = true;
        }
      } else if (["ageyear1", "ageyear2"].includes(column.property)) {
        if (this.related.agerelated) {
          this.age.agenum1 = "";
          this.age.agenum2 = "";
          this.age.ageunit1 = "M";
          this.age.ageunit2 = "D";
          this.age.agestr = "";
          this.age.agemodel = "";
          setTimeout(() => {
            this.$refs.refagenum1.focus();
          }, 10);
          this.ageShowDialog(row, column);
        }
      }
    },
    //年龄相关
    ageFocus(event) {
      event.currentTarget.select();
    },
    agenum1Change(flag) {
      switch (flag) {
        case "Y":
          this.age.ageunit2 = "M";
          break;
        case "M":
          this.age.ageunit2 = "D";
          break;
        case "D":
          this.age.ageunit2 = "H";
          break;
        case "H":
          this.age.ageunit2 = "F";
          break;
        default:
          this.age.ageunit2 = "F";
      }
      this.getAgestr();
    },
    ageShowDialog(row, column) {
      this.$refs.dialogage
        .ShowDialog()
        .then(() => {
          if (this.age.agenum1 == "") {
            this.ageShowDialog(row, column);
            this.$alert("请输入一级年龄！", "提示");
            return false;
          }

          if (column.property == "ageyear1") {
            if (!!this.age.agenum1 && Number(this.age.agenum1) != -1) {
              this.getAgestr();
              this.GetPatBirthAge(this.age.agestr)
                .then((res) => {
                  row.ageyear1 = res.str;
                  row.agestr1 = res.str1;
                })
                .catch((e) => {
                  //row.ageyear1 = "-1";
                });
            } else {
              //row.ageyear1 = "-1";
            }
          } else if (column.property == "ageyear2") {
            if (!!this.age.agenum1 && Number(this.age.agenum1) != -1) {
              this.getAgestr();
              this.GetPatBirthAge(this.age.agestr)
                .then((res) => {
                  row.ageyear2 = res.str;
                  row.agestr2 = res.str1;
                })
                .catch((e) => {
                  // row.ageyear2 = "-1";
                });
            } else {
              //row.ageyear2 = "-1";
            }
          }
        })
        .catch(() => {
          console.log("catch");
        });
    },
    getAgestr() {
      if (this.age.ageunit1 != this.age.ageunit2) {
        if (this.age.agenum1 != "") {
          this.age.agestr = this.age.agenum1 + this.age.ageunit1;
        }
        if (this.age.agenum2 != "") {
          this.age.agestr += this.age.agenum2 + this.age.ageunit2;
        }
      } else {
        if (this.age.agenum1 != "") this.age.agestr = this.age.agenum1 + this.age.ageunit1;
        this.age.agenum2 = "";
      }
      this.age.agestr = this.age.agestr.toLowerCase();
      if (this.age.agestr != "") this.age.agemodel = this.age.agestr.toLowerCase().replace("y", "岁").replace("m", "月").replace("d", "天").replace("h", "小时").replace("f", "分钟");
    },
    //多行参考值文本编辑闭窗赋值
    reftext_saveevent() {
      let temp = this.val_ref_text.split("\n");
      if (temp.length > 0) {
        temp = temp.filter((item) => item);
        this.diagReturnRow.ref_text = temp.join("|");
      } else {
        this.diagReturnRow.ref_text = this.val_ref_text;
      }
      this.reftext_dialog = false;
    },
    reftext_cancelevent() {
      this.reftext_dialog = false;
    },
    //标本类型
    physicycleChange(code, name) {
      this.diagReturnRow.physicycle = code;
      this.diagReturnRow.physicyclename = name;
      this.dialogphysicycle = false;
    },
    //标本类型
    specimenChange(code, name) {
      this.diagReturnRow.specimen_code = code;
      this.diagReturnRow.specimen_name = name;
      this.dialogspecimen = false;
    },
    //诊断ICD闭窗赋值
    diagicdChange(code, name, row) {
      this.diagReturnRow.diag_icd = row.diagicd10;
      this.diagReturnRow.diagname = name;
      this.dialogdiagicd = false;
      //this.$refs.xTableRptitemRef.updateListenter();
    },
    //科室相关修改
    deptChange(code, name, row) {
      this.diagReturnRow.deptno = code;
      this.diagReturnRow.deptname = name;
      this.dialogdeptno = false;
    },
    headerCellClassName({ column, columnIndex }) {
      if (["autochk_l", "autochk_h"].includes(column.property)) {
        return "col-blue";
      }
    },
  },
};
</Script>

<style scoped></style>
